<template>
    <div>
        <RSBackGround>
            <form action="" class="sign-form">
                <h1>会员登录</h1>
                <div>
                    <label for="email">
                        <span class="sign-icon sign-icon-email"></span>
                        <input type="email" id="email" required placeholder="请输入邮箱" v-model="user.email">
                    </label>

                </div>
                <div>
                    <label for="password">
                        <span class="sign-icon sign-icon-password"></span>
                        <input type="password" id="password" minlength="8" maxlength="16" required placeholder="请输入密码" v-model="user.password">
                    </label>
                </div>
                <div class="findpassword">
                    <router-link to="">忘记密码</router-link>
                    <router-link to="/register">免费注册</router-link>
                </div>
                <input type="submit" @click="signSubmit($event)" class="input-submit">
            </form>
        </RSBackGround>
    </div>
</template>

<script>
    import RSBackGround from "@/components/common/rsbackground/RSBackGround";
    import {signIn} from "@/network/registerandsignIn";

    export default {
        name: "SignIn",
        data() {
            return {
                user: {
                    email: '',
                    password: ''
                }
            }
        },
        components: {
            RSBackGround
        },
        methods: {
            signSubmit(e) {
                if (this.user.email != '' && this.user.password) {
                    e.preventDefault()
                    signIn(this.user).then((res)=> {
                        if (res.data.res_code === 2) {
                            this.$store.commit('changeLogn', res.data.userMessage)
                            this.$router.push('/')
                            this.$store.dispatch('getCart')
                            this.$socket.emit('lognIn', this.$store.state.lognUser._id)
                        } else if (res.data.res_code === 0) {
                            alert("Serve is Busy")
                        } else if (res.data.res_code === 1) {
                            alert(res.data.message)
                        }
                    })
                }else {
                    e.preventDefault()

                }
            }
        }
    }
</script>

<style scoped>
    .sign-form {
        width: 300px;
        height: 350px;
        background-color: #fff;
        display: flex;
        flex-flow: column nowrap;
        padding: 20px;
        justify-content: space-around;
        margin-left: 1200px;
    }
    .sign-form .sign-icon {
        display: block;
        height: 47px;
        width: 45px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 50%;
        background-color: #e0e0e0;
    }
    .sign-form div label{
        display: flex;
        border: 1px #b0b0b0 solid;
    }
    .sign-form div label input {

        height: 45px;
        flex: 1;
        border: none;
    }
    .sign-icon-email {
        background-image: url("../../assets/img/rsbackground/youxiang.svg");
    }
    .sign-icon-password {
        background-image: url("../../assets/img/rsbackground/mima.svg");
    }
    .input-submit {
        display: block;
        width: 150px;
        background-color: #ff4500;
        text-align: center;
        margin: 0 auto;
        color: #ffffff;
        height: 45px;
        border: none;
    }
    .findpassword {
        display: flex;
        justify-content: space-between;
    }
    .findpassword a{
        color: blue;
        text-decoration: underline blue;
    }
</style>